<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE HTML>
<html>
<head>
    <base href="<%=basePath%>"/>
	<%--<link rel="Bookmark" href="favicon.ico" >--%>
	<%--<link rel="Shortcut Icon" href="favicon.ico" />--%>
	<%--<link rel="stylesheet" type="text/css" href="assets/H-ui/static/h-ui/css/H-ui.min.css" />--%>
	<%--&lt;%&ndash;引起冲突的样式&ndash;%&gt;--%>
	<%--<link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/table.css"/>--%>
	<%--<link rel="stylesheet" type="text/css" href="assets/H-ui/lib/Hui-iconfont/1.0.8/iconfont.css" />--%>
	<%--<link rel="stylesheet" type="text/css" href="assets/H-ui/static/h-ui.admin/skin/default/skin.css" id="skin" />--%>
	<%--<link rel="stylesheet" type="text/css" href="assets/H-ui/static/h-ui.admin/css/style.css" />--%>
	<link rel="stylesheet" href="assets/css/bootstrap.css"/>
	<!--_footer 作为公共模版分离出去-->
	<script src="assets/js/jquery.min.js"></script>
	<script src="assets/js/bootstrap.min.js"></script>
	<!--/_footer /作为公共模版分离出去-->

<!--/meta 作为公共模版分离出去-->

<title>角色管理 - 管理员管理 </title>
</head>
<body>

<%--<section class="Hui-article-box1">--%>
	<%--<div>--%>
		<%--<article>--%>
			<%--<div class="mt-10">--%>
				<div class="container">
					<div class="col-lg-10 col-lg-offset-1">
						<div class="panel-body"></div>
			<table class="table table-hover table-bordered<%--table table-border table-bordered table-hover table-bg--%>">

				<thead>
					<%--<tr>--%>
						<%--<th scope="col" colspan="6">角色管理</th>--%>
					<%--</tr>--%>
					<tr class="text-c">
						<input type="hidden" name="pageNum" value="1">
						<th width="40" style="text-align: center">ID</th>
						<th width="200" style="text-align: center">角色名</th>
						<th width="70" style="text-align: center">操作</th>
					</tr>
				</thead>
				<tbody style="text-align: center">

				<c:if test="${not empty roleList.list}">
				<c:forEach items="${roleList.list}" var="x" >
					<tr class="text-c">
						<td>${x.roleId}</td>
						<td>${x.roleName}</td>
						<td class="f-14">
							<a title="编辑"  onclick="updateRole(this)" class="btn-primary btn-sm" style="text-decoration:none">详情</a>
							<a title="删除" href="javascript:;" onclick="delRole(${x.roleId})" class="btn-danger btn-sm" style="text-decoration:none">删除</a></td>
					</tr>
				</c:forEach>
				</c:if>
				</tbody>
			</table>

			<%--</div>--%>
		<%--</article>--%>
	<%--</div>--%>
	<%--增加的模态框--%>
	<a class="btn-primary btn-sm" data-toggle='modal' data-target='#addModal' style="z-index: 1">添加角色</a>
						<div id="page" style="float: right" align="center">
							当前第${roleList.pageNum}页, 总共${roleList.pages}页，每页${roleList.pageSize}行，总共${roleList.total}行。
							<a id="firstPage" class="btn-sm btn-primary" onclick="changeNum(${roleList.prePage})">上一页</a>
							<a id="lastPage" class="btn-sm btn-primary" onclick="changeNum(${roleList.nextPage})">下一页</a>
						</div>
					</div>
				</div>
<%--评语类表添加模态框部分--%>
	<div class="modal fade" id="addModal" style="z-index:99999" >
		<div class="modal-dialog" style="width: 600px;z-index: 99999">
			<div class="modal-content">
				<!-- 模态框头部 -->
				<div class="modal-header" style="text-align: center;z-index: 1">
					<label>角色增加</label>
					<%--<button type="button" class="close" data-dismiss="addModal">&times;</button>--%>
				</div>
				<div class="modal-body">
					<form action="role/add.action" method="post" id="addForm">
						<input type="text" hidden value="${role.roleId}" name="roleId">
						<br>
						角色名称：<br>
						<input type="text" class="input-text" value="" placeholder="" id="roleName" name="roleName" datatype="*4-16" >
						<span  id="roleName_input" style="font-size: 20px"></span>
						<br>
						<br>
						<input type="button" value="提交" onclick="addRole()">
						<input type="button" value="返回" onclick="returnRoles()">
					</form>
				</div>
				<div class="modal-footer">
				</div>
			</div>
		</div>
	</div>


<%--修改--%>
	<div class="modal fade" id="updateModal1" style="z-index:99999" >
		<div class="modal-dialog" style="width: 600px;z-index: 99999">
			<div class="modal-content">
				<!-- 模态框头部 -->
				<div class="modal-header" style="text-align: center;z-index: 1">
					<label>角色修改</label>
					<%--<button type="button" class="close" data-dismiss="addModal">&times;</button>--%>
				</div>
				<div class="modal-body">
					<form action="role/update.action" method="post" id="addForm1">
						<input type="text" hidden  name="roleId" id="roleId">
						<br>
						角色名称：<br>
						<input type="text" class="input-text" value="" placeholder="" id="roleName1" name="roleName" datatype="*4-16" >
						<span  id="roleName_input1" style="font-size: 20px"></span>
						<br>
						<br>
						<input type="button" value="提交" onclick="updateRole1()">
						<input type="button" value="返回" onclick="returnRoles()">
					</form>
				</div>
				<div class="modal-footer">
				</div>
			</div>
		</div>
	</div>

<%--</section>--%>

<script type="text/javascript">
	function updateRole1(){
        var flag=true;
        var roleId=$("#roleId").val();
        var roleName=$("#roleName1").val();
        var addForm1=$("#addForm1");
        var roleName_input1=$("#roleName_input1");
        roleName_input1.text("");
        if(roleName==null||roleName=='') {
            roleName_input1.text("角色姓名不能为空");
            flag = false;
        }
        if(flag){
            $.post("role/update.action",
                {"roleId":roleId,"roleName":roleName},
                function (result) {
                    console.log(result);
                    console.log(typeof result);
                    if(result==true){
                        alert("修改成功")
                        window.location.href="role/role.action"
                    }else if(result==false){
                        alert("添加失败");
                    }
                })
        }
	}
	function returnRoles(){
        window.location.href="role/role.action"
	}
function updateRole(obj) {
    var tds= $(obj).parent().parent().find('td');
    $("#roleId").val(tds.eq(0).text());
    $("#roleName1").val(tds.eq(1).text());
    $('#updateModal1').modal({show:true});
}
function addRole() {
    var flag=true;
    var roleId=$("#roleId").val();
    var roleName=$("#roleName").val();
    var addForm=$("#addForm");
    var roleName_input=$("#roleName_input");
    roleName_input.text("");
    if(roleName==null||roleName==''){
        roleName_input.text("角色姓名不能为空");
        flag=false;
    }
    if(flag){
        $.post("role/add.action",
            {"roleId":roleId,"roleName":roleName},
            function (result) {
                console.log(result);
                console.log(typeof result);
                if(result==true){
                    alert("添加成功")
                    window.location.href="role/role.action"
                }else if(result==false){
                    alert("添加失败");
                }
            })
    }
}
	function delRole(obj) {
        var roleId = obj;
        $.post("role/del.action",
            {"roleId": roleId},
			function (date) {
				console.log(date);
				console.log(typeof date);
				if(date==true){
				    window.alert("删除角色成功")
					window.location.href="role/role.action"
				}else {
				    window.alert("删除失败，角色被使用，不能被删除")
					window.location.href="role/role.action"
				}
            }
        )
    }
function changeNum(obj) {
	var pageNum=obj;
	window.location.href="role/role.action?pageNum="+pageNum;
}

</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>